<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滴滴练习</title>
</head>

<body>
    <input id="temp" type="text" value placeholder="输入...">

</body>

<script>
    // const p = new Promise((resolve, reject) => {
    //     console.log(1);
    //     setTimeout(() => {
    //         resolve();
    //     }, 2000)
    // })
    // p.then(res => {
    //     setTimeout(() => {
    //         console.log(1);
    //     }, 2000)
    // })
    //     .then(res => console.log(1))

    // 输出顺序
    // console.log('script start');
    // async function async1() {
    //     await async2()
    //     console.log('async1 end');
    // }
    // async function async2() {
    //     console.log('async2 end');
    //     return Promise.resolve().then(() => console.log('async2 end1'))
    // }
    // async1()
    // setTimeout(function () {
    //     console.log('setTimeout');
    // }, 0)

    // new Promise(resolve => {
    //     console.log('Promise');
    //     resolve()
    // })
    // .then(function () {
    //     console.log('promise1');
    // })
    // .then(function () {
    //     console.log('promise2');
    // })
    // console.log('script end');
    //
    

    // 防抖
    
    
    const items = ['空格', 'utf', 'crlf'];

    //防抖
    function debounce(fn, delay) {
        let timer;
        return function(...args) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                clearTimeout(timer);
                timer = null;
            }, delay);
        }
    }

    function getItems() {
        items.forEach(item => {
            console.log(item);
        })
    }
    var curDom = document.getElementById("temp");
    curDom.addEventListener('input', throttled(getItems, 2000))

    // function debounce(fun, delay) {
    //     let timer;
    //     return function(...args) {
    //         cleartTimeout(timer);
    //         timer = setTimeout(() => {
    //             fn.apply(this, arguments);
    //             cleartTimeout(timer);
    //             timer = null;
    //         }, delay)
    //     }
    // }

    function throttled(fn, delay) {
        let timer = null;
        let startTime = Date.now();
        return function() {
            let curTime = Date.now();
            let remaining = delay - (curTime - startTime);
            let context = this;
            let args = arguments;
            clearTimeout(timer);
            if (remaining <= 0) {
                fn.apply(context, args);
                startTime = Date.now();
            } else {
                timer = setTimeout(fn, remaining);
            }
        }
    }

    var arr = [1, 2, 3, 4, 5];
    
    // const res = arr.filter((item) => item > 3);
    // console.log(res);


    Array.prototype.myfilter = function(fn, thisValue) {
        const filterArr = [];
        for (let i = 0; i < this.length; i++) {
            const res = fn.call(thisValue, this[i], i, this);
            if (res) {
                filterArr.push(this[i]);
            }
        }
        return filterArr;
    }

    const result = arr.myfilter((item) => item > 2);
    console.log(result);

    // Function.prototype.myBind = function() {
    //     const _func = this;
    //     const _self = arguments[0];
    //     const _arguments = Array.prototype.slice(arguments, 1);
    //     return function() {
    //         _func.apply(_self, _arguments.concat(arguments));   
    //     }
    // }
    // Function.prototype.myBind = function() {
    //     const that = this;
    //     const _self = arguments[0];
    //     const _arguments = Array.prototype.slice(arguments, 1);
    //     return function() {
    //         that.apply(_self, _arguments.concat(arguments));
    //     }
    // }



</script>

</html>